
<template>
  <div class="merchantsList">
    <div class="top">
      <div class="time pad">
        <el-input
          placeholder="评价店铺/用户名称/手机号"
          v-model="filter.query"
          width="280px"
        >
        </el-input>
      </div>
      <div class="time pad">
        <span class="label">评价时间：</span>
        <el-date-picker
          v-model="date"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="filter.areaId" filterable placeholder="请选择">
          <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="main">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
       <template v-slot:image="{ scope }">
          <div class="imgBox">
            <img  v-for="(item,index) in scope.row.image" :key="index" :src="item"  @click="lookImg(item)" alt="">
          </div>
        </template>
        <template v-slot:isShow="{ scope }">
          <div v-if="scope.row.isShow == 1">展示</div>
          <div v-if="scope.row.isShow == 2">不展示</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button
            @click="agree(scope.row.id)"
            size="small"
            v-if="scope.row.status == 1"
            >同意退款</el-button
          >
        </template>
      </ex-table>
    </div>
    <!-- 查看图片详情 -->
    <el-dialog title="" :visible.sync="imgVisible" width="800px" :close-on-click-modal="true">
      <div class="dialog_img_box">
        <img :src="dialogImg" alt="">
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
// components
import ExportExcelButton from "@/components/ExportExcelButton/index";
// api
import {
  shopevaluateList,
  returnAgree,
} from "@/api/merchants";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";
import { userAreaSelect } from "@/api/common";
export default {
  name: "NewIncreaseVerify",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  computed: {},
  data() {
    return {
      dialogImg: '',
      imgVisible: false,
      value: [],
      date: [],
      loading: false,
      tableColumn: [
      { prop: "areaName",label: "管辖区域", width:'130' },
        { prop: "shopName", label: "评价店铺" ,width: "150"},
        { prop: "nickName", label: "用户名称", width: "150" },
        { prop: "phoneNumber", label: "手机号", width: "150" },
        { label: "图片",slot: true,slotName: "image" },
        { prop: "totalPoints", label: "总评分", width: "50" },
        { prop: "environmentPoints", label: "店铺环境", width: "50" },
        { prop: "servicePoints", label: "服务态度", width: "50" },
        { prop: "content", label: "评价",width: "150"},
        { label: "前端是否显示", slot: true,slotName: "isShow", width: "80" },
        // {
        //   label: "操作",
        //   slot: true,
        //   slotName: "operate",
        //   width: "180",
        //   fixed: "right",
        // },
      ],
      filter: {
        areaId:'',//区域id
        query: "", //评价店铺、用户名称、手机号
        startDate: "", //退卡开始时间
        endDate: "", //退卡结束时间
      },
      tableData: [],
      detailDialog: false,
      normal: "",
      blacklist: "",
      isShow: true,
      areaSelect: [], //区域下拉
    };
  },

  created() {
    this.getList();
    this.getUserAreaSelect();
  },
  methods: {
    getUserAreaSelect() {
      //查询用户区域下拉框
      userAreaSelect().then((res) => {
        var arr = [{
          id: "",
          value: "全部",
        }, ];
        this.areaSelect = arr.concat(res.result);
      });
    },
    //查看图片
    lookImg(e) { 
      this.dialogImg = e
      this.imgVisible = true
    },
    //同意退款
    agree(id) {
      this.$confirm("您确认同意退款吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id)
          returnAgree(id).then((res) => {
            this.$message({
              message: "操作成功!",
              type: "success",
              duration: 1500,
            });
            setTimeout(()=>{
              this.getList();
            },500)
          });
        })
        .catch();
      //   this.$router.push({
      //     path: "/merchants/merchants-detail",
      //     query: { id: id },
      //   });
    },
    
    //列表
    getList() {
      this.loading = true;
      if(this.date.length > 0){
        this.filter.startDate = this.date[0]
        this.filter.endDate = this.date[1]
      }
      const params = {
        ...this.pageOptions,
        ...this.filter,
      };

      shopevaluateList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData =  records.map(item => {
            item.image = JSON.parse(item.image)
            return item
          })
          console.log('this.tableData',this.tableData)
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //重置
    setReset() {
      this.currentNavtab = 0;
      this.filter.query = "";
      this.filter.startDate = "";
      this.filter.endDate = "";
      this.filter.areaId = "";
      this.date = [];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    //搜索
    search() {
      console.log(this.date);
      this.filter.startDate = this.date[0];
      this.filter.endDate = this.date[1];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style/merchantsList";
.el-input {
  width: 240px;
}
.first_box {
  ::v-deep :nth-child(1).el-input__inner {
    width: 100px;
  }
  ::v-deep :nth-child(2).el-input__inner {
    width: 200px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.imgBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  img{
    width: 100px;
    height: 60px;
    margin: 10px 10px 0 0;
  }
}
.dialog_img_box {
  width: 700px;
}

.dialog_img_box img {
  width: 100%;
}
</style>